<template>
  <div class="patient-number-type">
    <div class="patient-number-type-inside">
      <div class="header">
        <div class="left item">
          <img
              alt="左侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
        <div class="middle item">请点击下方卡片<br/>选择预约类型</div>
        <div class="right item">
          <img
              alt="右侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
      </div>
      <el-row :gutter="32" class="patient-number-area">
        <template v-for="item in hospAreaOptions">
          <el-col :span="12" :class="item.className">
            <div class="patient-number-item" @click="handleClick(item)">
              <div class="sign">
                <template v-if="item.id===1">
                  <img
                      alt="第一个"
                      src="@/components/assets/images/design/1-25×2.png"
                  />
                </template>
                <template v-if="item.id===2">
                  <img
                      alt="第二个"
                      src="@/components/assets/images/design/1-26×2.png"
                  />
                </template>
              </div>
              <div class="name">{{ item.descInfo }}</div>
              <div class="icon">
                <img
                    alt="右侧"
                    src="@/components/assets/images/design/1-27×2.png"
                />
              </div>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HospAreaInfo',

  componentName: "patientNumberType",

  components: {},

  data() {
    return {}
  },

  computed: {
    hospAreaOptions() {
      return this.$store.getters['DRCbiz/getHospAreaOptions']
    },

    stepInfo() {
      return this.$store.getters['DRCbiz/getStepsInfo']
    },

  },

  mounted() {
  },

  methods: {
    handleClick(row) {
      let stepInfo = parseInt(this.stepInfo);
      this.$store.dispatch('DRCbiz/setHospAreaInfo', row);
      this.$store.dispatch('DRCbiz/setStepsInfo', ++stepInfo)

    }
  },
}

</script>

<style scoped lang="scss">
@import "assets/style";
</style>